<template>
  <div class="app-container">
    <el-card>
      <!--搜索表单开始-->
      <el-form :inline="true" size="small" :model="page.params">
        <el-form-item>
          <el-input v-model="page.params.title" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select clearable v-model="page.params.businessType" placeholder="请选择操作类型">
            <el-option
              v-for="item in typeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="page.params.dataRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="search">查询</el-button>
          <el-button type="warning" icon="el-icon-refresh" size="small" @click="page.params={}">重置</el-button>
        </el-form-item>
      </el-form>
      <!--搜索表单结束-->
      <!--操作日志数据表格开始-->
      <div>
        <div style="margin-bottom: 5px">
          <el-button type="danger" :disabled="multiple" icon="el-icon-remove" size="small"
                     @click="batchDelete">批量删除
          </el-button>
          <el-button type="danger" icon="el-icon-remove" size="small" :disabled="!dataPage.list.length>0"
                     @click="clearAll">清空所有
          </el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="dataPage.list"
          border
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="operId" label="编号" align="center"></el-table-column>
          <el-table-column prop="title" label="用户名" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="businessType" label="业务类型" align="center">
            <template slot-scope="{row}">
              <dict-tag :data-list="typeOptions" :value="row.businessType"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column prop="requestMethod" label="请求方式" align="center"></el-table-column>
          <el-table-column prop="operName" label="操作人员" align="center"></el-table-column>
          <el-table-column prop="operIp" label="操作地址" align="center"></el-table-column>
          <el-table-column prop="operLocation" label="操作地点" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="{row}">
              <dict-tag :data-list="statusOptions" :value="row.status"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column prop="operTime" label="访问时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <el-button type="text" icon="el-icon-info" @click="toInfo(row)">查看</el-button>
              <el-button type="text" icon="el-icon-delete" @click="toDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNumber"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataPage.totalCount">
        </el-pagination>
      </div>
      <!--操作日志数据表格结束-->
    </el-card>

    <!--通知公告添加的弹出层开始-->
    <el-dialog :title="title"
               center
               width="70%"
               :visible.sync="infoDialog"
               v-if="infoDialog">
      <sys-oper-log-info :info-object="currentRow" :status-options="statusOptions" :type-options="typeOptions"></sys-oper-log-info>
    </el-dialog>
    <!--通知公告添加的弹出层结束-->
  </div>
</template>

<script>
import sysOperLogApi from "@/api/system/sysOperLog";
import sysOperLogInfo from "./sys-oper-log-info";

export default {
  name: "sys-oper-log-list",
  components:{
    sysOperLogInfo
  },
  data() {
    return {
      //是否显示加载中的进度条
      loading: false,
      //查询条件
      page: {
        pageNumber: 1,
        pageSize: 10,
        params: {
          title: undefined,
          businessType: undefined,
          dataRange: undefined
        }
      },
      //操作日志的表格数据
      dataPage: {
        list: [],
        totalCount: 0
      },
      //状态的字典数据
      statusOptions: [],
      //业务类型的字典数据
      typeOptions: [],
      //选中的日志的ID数组
      ids: [],
      //是否禁用批量删除的按钮
      multiple: true,
      //弹出层的标题
      title:"",
      //是否打开详情的弹出层
      infoDialog:false,
      //当前点击的行
      currentRow:undefined
    }
  },
  created() {
    this.getDataByType("sys_login_status").then(res => {
      this.statusOptions = res.data;
    })
    this.getDataByType("sys_oper_type").then(res => {
      this.typeOptions = res.data;
    })
    //加载操作日志数据
    this.getByPage()
  },
  methods: {
    //加载操作日志数据
    getByPage() {
      this.loading = true
      //处理开始时间和结束时间
      if (this.page.params.dataRange) {
        this.page.params.startTime = this.page.params.dataRange[0]
        this.page.params.endTime = this.page.params.dataRange[1]
      }
      sysOperLogApi.getByPage(this.page).then(res => {
        this.dataPage.list = res.data.list
        this.dataPage.totalCount = res.data.totalCount
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    //多选变量时触发的事件
    handleSelectionChange(rows) {
      this.ids = rows.map(item => item.operId);
      this.multiple = !rows.length > 0
    },
    //每页条数发生变化时触发
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getByPage()
    },
    //页码发生变化时触发
    handleCurrentChange(val) {
      this.page.pageNumber = val;
      this.getByPage()
    },
    //搜索
    search() {
      this.page.pageNumber = 1
      this.getByPage();
    },
    //删除
    toDelete(row) {
      this.$confirm(`此操作会删除【${row.title}】该操作日志数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysOperLogApi.deleteById(row.operId).then(res => {
          this.$message.success('删除成功!');
          this.getByPage();
        })
      }).catch(() => {
        this.$message.info('已取消删除!');
      });
    },
    //批量删除
    batchDelete() {
      this.$confirm(`此操作会删除选中的所有操作日志数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysOperLogApi.batchDelete(this.ids).then(res => {
          this.$message.success('批量删除成功!');
          this.getByPage();
        })
      }).catch(() => {
        this.$message.info('已取消批量删除!');
      });
    },
    //清空日志
    clearAll() {
      this.$confirm(`此操作会清空的所有操作日志数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysOperLogApi.clearOperLog().then(res => {
          this.$message.success('清空成功!');
          this.getByPage();
        })
      }).catch(() => {
        this.$message.info('已取消清空!');
      });
    },
    //查看
    toInfo(row){
      this.currentRow=row;
      this.title="详情"
      this.infoDialog=true;
    }
  }
}
</script>

<style scoped>

</style>

